<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="dashboard/header :: header"></div>

<body id="page-top">

	<style type="text/css">
		.layui-layer-btn a {
			height: 35px;
			line-height: 35px;
			margin: 0px 5px 0;
			padding: 0 15px;
			border: 1px solid #dedede;
			background-color: #fff;
			color: #333;
			border-radius: 2px;
			font-weight: 400;
			cursor: pointer;
			text-decoration: none;
		}
		.layui-layer-btn layui-layer-btn-{
			background-color:#f5f5f5;	
		}
	</style>
	<div id="wrapper">

		<div id="content-wrapper">
		
			<div class="col-sm-12">
				<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
					<li class="nav-item">	
						<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">虚拟机申请</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">数据库申请</a>
					</li>
				</ul>
			</div>
			
			<div class="col-sm-12">
				<div class="tab-content" id="pills-tabContent">
				
					<!-- 虚拟机申请管理_start -->	
					<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
						<div class="container-fluid" style="padding: 0px;">

							<ol class="breadcrumb">
								<li class="breadcrumb-item"><a href="#">虚拟机申请管理</a></li>
							</ol>

							<form class="form-inline" id="trainingSearchForm">
								<div class="input-group mb-2 mr-sm-2">
									<select name="condition[masterCode]" style="width: 200px"
										id="inputState" class="form-control">
										<option th:each="m:${schools}" th:text="${m.masterName}" th:value="${m.masterCode}"></option>
									</select>
								</div>
								<label class="sr-only" for="inlineFormInputName2">Name</label> <input
									type="text" class="form-control mb-2 mr-sm-2" id="orderId"
									name="condition[orderId|like]" placeholder="订单号"> <label
									class="sr-only" for="inlineFormInputGroupUsername2">Username</label>

								<div class="input-group mb-2 mr-sm-2">
									<select name="condition[sendStatus]" id="inputState"
										class="form-control">
										<option value="">状态</option>
										<option value="01">未接单</option>
										<option value="02">已接单</option>
										<option value="04">已签收</option>
										<option value="05">订单超时</option>
									</select>
								</div>

								<button type="button" onclick="search(this)" class="btn btn-primary mb-2">搜索</button>
									
								&nbsp;&nbsp;
								<button type="button" onclick="add()" class="btn btn-primary mb-2">虚拟机申请</button>
								
							</form>
							<div class="span12">
								<div class="table-responsive">
									<table class="table table-bordered" id="hostDataTable" width="100%" cellspacing="0">
										<thead>
											<tr>
												<th style="width: 150px">所属机房</th>
												<th style="max-width: 300px">服务用途</th>
												<th>存储</th>
												<th>内存</th>
												<th>申请源</th>
												<th width="150px">申请时间</th>
												<th width="150px">操作</th>
											</tr>
										</thead>
										<tbody>
										</tbody>
										<footer>
											<tr>
												<th style="width: 150px">所属机房</th>
												<th style="max-width: 200px">服务用途</th>
												<th>存储</th>
												<th>内存</th>
												<th>申请源</th>
												<th>申请时间</th>
												<th>操作</th>
											</tr>
										</footer>
									</table>
								</div>
							</div>
						</div>
					</div>	
					<!-- 虚拟机申请管理_end -->	
					
					<!-- 数据库申请管理_start -->	
					<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
						<div class="container-fluid" style="padding: 0px;">
							<ol class="breadcrumb">
								<li class="breadcrumb-item"><a href="#">数据库申请管理</a></li>
							</ol>
							<form class="form-inline">
								<div class="input-group mb-2 mr-sm-2">
									<select name="condition[masterCode]" style="width: 200px"
										id="inputState" class="form-control">
										<option th:each="m:${schools}" th:text="${m.masterName}" th:value="${m.masterCode}"></option>
									</select>
								</div>
								<label class="sr-only" for="inlineFormInputName2">Name</label> <input
									type="text" class="form-control mb-2 mr-sm-2" id="orderId"
									name="condition[orderId|like]" placeholder="订单号"> <label
									class="sr-only" for="inlineFormInputGroupUsername2">Username</label>

								<div class="input-group mb-2 mr-sm-2">
									<select name="condition[sendStatus]" id="inputState"
										class="form-control">
										<option value="">状态</option>
										<option value="01">未接单</option>
										<option value="02">已接单</option>
										<option value="04">已签收</option>
										<option value="05">订单超时</option>
									</select>
								</div>
								<button type="button" onclick="search(this)" class="btn btn-primary mb-2">搜索</button>
									
								&nbsp;&nbsp;
								<button type="button" onclick="addDb()" class="btn btn-primary mb-2">数据库申请</button>
									
							</form>
							<div class="span12">
								<div class="table-responsive">
									<table class="table table-bordered" id="databaseDataTable" width="100%"
										cellspacing="0">
										<thead>
											<tr>
												<th style="width: 150px">所属机房</th>
												<th width="100px">用户名</th>
												<th width="400px">使用描述</th>
												<th>申请源</th>
												<th width="150px">申请时间</th>
												<th width="150px">操作</th>
											</tr>
										</thead>
										<tbody>
										</tbody>
										<footer>
											<tr>
												<th style="width: 150px">所属机房</th>
												<th style="max-width: 200px">用户名</th>
												<th>使用描述</th>
												<th>申请源</th>
												<th>申请时间</th>
												<th>操作</th>
											</tr>
										</footer>
									</table>
								</div>
							</div>
						</div>
					</div>
					<!-- 数据库申请管理_end -->	
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
	
		var columns = [ { data: 'masterCode_label' },
            { data: 'goodsName' },
            { data: 'orderCpu' },
            { data: 'receiveAddress' },
            { data: 'sendTime' },
            { data: 'id' }
          ] ; 
		var columnDefs = [{
			   "targets" : 1,//操作按钮目标列
			   "data" : null,
			   "render" : function(data, type,row) {
				   var id = row.orderId ; 
				   var html = "<a style='cursor:pointer;' data-id="+id+" data-scope='runman' onclick='sendAll(this)'>"+data+"</a>" ; 
				   return html;
			    }
        	  },
        	  {
			   "targets" : 5,//操作按钮目标列
			   "data" : null,
			   "render" : function(data, type,row) {
				   var id = row.id ; 
				   var html = "<a style='cursor:pointer' data-id="+id+" onclick='showDetail(this)'><i class='fa fa-leaf'></i> 通过</a>" ; 
				   html += "<a style='cursor:pointer;margin-left:10px;color:red' data-id="+id+" onclick='deleteOrder(this)'><i class='fa fa-trash'></i> 删除</a>" ; 
				   return html;
			   }
		  }]  ; 
		
		var hostColumns = [ { data: 'masterCode_label' },
            { data: 'goodsName' },
            { data: 'orderStorage' },
            { data: 'orderMemory' },
            { data: 'receiveAddress' },
            { data: 'sendTime' },
            { data: 'id' }
          ] ; 
		
		var hostColumnDefs = [{
			   "targets" : 1,//操作按钮目标列
			   "data" : null,
			   "render" : function(data, type,row) {
				   var id = row.orderId ; 
				   var html = "<a style='cursor:pointer;' data-id="+id+" data-scope='runman' onclick='sendAll(this)'>"+data+"</a>" ; 
				   return html;
			    }
        	  },
        	  {
			   "targets" : 6,//操作按钮目标列
			   "data" : null,
			   "render" : function(data, type,row) {
				   var id = row.id ; 
				   var html = "<a style='cursor:pointer' data-id="+id+" onclick='showDetail(this)'><i class='fa fa-leaf'></i> 通过</a>" ; 
				   html += "<a style='cursor:pointer;margin-left:10px;color:red' data-id="+id+" onclick='deleteOrder(this)'><i class='fa fa-trash'></i> 删除</a>" ; 
				   return html;
			   }
		  }]  ; 
		
		$(document).ready(function() {
			datatable("hostDataTable", "/manager/order_list_data" , hostColumns , hostColumnDefs) ; 
			datatable("databaseDataTable", "/manager/order_list_data" , columns , columnDefs) ; 
		});
		
		function showDetail(btn){
			var orderId = $(btn).attr("data-id") ; 
			
			layer.open({
			  type: 2,
		      title: '主机分配',
		      area: ['60%', '70%'],
			  content: '/manager/order_has_pass',
		      btn: ['确定', '关闭'] ,
			  yes: function(index, layero){
				  	console.log("index = " + index + " layero = " + layero) ; 
					var selectResourceParentNode = $(layero).find("iframe")[0].contentWindow.document.getElementById("selectNodes")
					
					var v = $(selectResourceParentNode).val() ; 
					console.log("v = " + v)	 ;
					
					$.post("/manager/order_apply_pass" , {orderInfoId :orderId , machineIds :v} , function(response){
						if(response.code == 200){
							layer.close(i) ; 
							$(btn).html(response.data) ; 
							$(btn).removeAttr("onclick") ; 
							$("#dataTable").dataTable().fnDraw(false);
						}else{
							layer.msg(response.message) ; 
						}
					},"json") ; 
					
					layer.close(index) ;
			   }
			}); 
				
			/*
			var orderId = $(btn).attr("data-id") ; 
			var i = layer.prompt({title: '分配IP', formType: 0}, function(text, index){
				var remark = $("#remark").val() ; 
				readNameDoing = true ; 
				
				$.post("/manager/order_apply_pass" , {orderInfoId :orderId , machineIp :text} , function(response){
					readNameDoing = false ; 
					
					if(response.code == 200){
						layer.close(i) ; 
						$(btn).html(response.data) ; 
						$(btn).removeAttr("onclick") ; 
						
						$("#dataTable").dataTable().fnDraw(false);
					}else{
						layer.msg(response.message) ; 
					}
					
				}) ; 
			});	
		   */
		}
		
		function deleteOrder(btn){
			var orderId = $(btn).attr("data-id") ; 
			layer.confirm("确定是否删除?", {
				  btn: ['删除','取消'] //按钮
				}, function(){
				 	
					$.get("/manager/order_delete?orderId="+orderId , function(response){
						  layer.msg(response.message, {icon: 1});
						  $("#dataTable").dataTable().fnDraw(false);
					  }) ; 
				  
				});
		}
		
		function addDb(btn){
			layer.open({
				  type: 2,
				  title: false,
				  shade: 0.8, 
				  title: '添加',
				  area: ['50%', '80%'],
				  content: ['/manager/database_apply', 'yes'], //iframe的url，no代表不显示滚动条
				  end: function(){ 
					 console.log("close") ; 
					 $("#dataTable").dataTable().fnDraw(false);
				  }
			});
		}
		
		function add(btn){
			layer.open({
				  type: 2,
				  title: false,
				  shade: 0.8, 
				  title: '添加',
				  area: ['50%', '80%'],
				  content: ['/manager/order_add', 'yes'], //iframe的url，no代表不显示滚动条
				  end: function(){ 
				     console.log("close") ; 
					 $("#dataTable").dataTable().fnDraw(false);
				  }
				});
		}
		
		function sendAll(btn){
			var orderId = $(btn).attr("data-id") ; 
			layer.confirm("确认是否需要群发,群发所有人都会收到,请确认操作", {
				  btn: ['','会员'] //按钮
				}, function(){
					
					var scope = 'runman' ; //$(btn).attr("data-scope") ; 
				  	$.get("/manager/order_send_all?orderId="+orderId+"&scope="+scope , function(response){
						  layer.msg(response.message, {icon: 1});
				  	}) ; 
				  
				} , function(){
					
					var scope = 'all' ; //$(btn).attr("data-scope") ; 
				  	$.get("/manager/order_send_all?orderId="+orderId+"&scope="+scope , function(response){
						  layer.msg(response.message, {icon: 1});
				  	}) ; 
				});
		}
		
	</script>

</body>

</html>
